<template>
	<view>
		<uv-tabs :list="tabs" @change="changetab" :scrollable="false"></uv-tabs>
		<view class="carlist">
			<fy-car-item v-for="item in list" :key="item.id" :carInfo="item">
				<template v-slot:edit>
					<view class="car-list-box_buttons">
						<view class="button-top" @click="openTopSheet(item)">
							<image src="../../static/pyq01.png"></image>置顶
						</view>
						<view class="button-other" @click="editcar(item)">
							<image src="../../static/pyq05.png"></image>修改
						</view>
						<view v-if="queryForm.isend==0" class="button-other" @click="handleSetSend(1,item)">
							<image src="../../static/pyq04.png"></image>下架
						</view>
						<view v-else class="button-other" @click="handleSetSend(0,item)">
							<image src="../../static/pyq06.png"></image>出售
						</view>
					</view>
				</template>
			</fy-car-item> 
		</view>
		
		<uv-action-sheet ref="ref_action" cancelText="取消" :actions="topPackage" round="10" title="选择置顶"
			description='主页+搜索车友置顶优先显示,大幅提升车源曝光,并获得"置顶"标签,置顶剩余时长越长越靠前' @select="handleTop"></uv-action-sheet>

	</view>
</template>

<script>
	import { queryUserCarInfo, setUserCarIsEnd, buyTop } from '@/utils/http.js'
	import baseconfig from '@/config.js'
	import { mapState } from 'vuex'
	export default {
		data() {
			return {
				tabs: [{ name: '在售中' }, { name: '已下架' }],
				list: [],
				total: 0,
				queryForm: {
					start: 0,
					length: 10,
					isend: 0
				},
				status: 'loadmore',
				imgsrc: baseconfig.api_url,
				wxcode: '',
				selectCarInfo: {},

			}
		},
		onLoad() {
			this.fetchData()
		},
		computed: {
			...mapState({ topPackage: state => state.syspackage.topPackage })
		},

		methods: {
			async handleTop(e) {
				let that = this
				var parm = { type: 'upload', id: this.selectCarInfo.id, topid: e.id, code: this.wxcode }
				const { data, code } = await buyTop(parm)
				const { appId, nonceStr, packageVal, paySign, signType, timestamp } = data
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: String(timestamp),
					nonceStr: nonceStr,
					package: packageVal,
					signType: signType,
					paySign: paySign,
					success: function(res) {
						uni.showToast({
							title: '支付成功',
						})
						that.fetchData()
					},
					fail: function(err) {
						uni.showToast({
							title: '支付失败',
							icon: 'fail'
						})
					}
				})
			},
			openTopSheet(item) {
				this.selectCarInfo = item
				let that = this
				uni.login({
					success(res) { 
						const { code } = res 
						that.wxcode = code
					}
				})
				this.$refs.ref_action.open()
			},
			handleSetSend(type, car) {
				setUserCarIsEnd({ isend: type, id: car.id }).then(res => {
					const { code } = res
					if (code === 200) {

						this.list = []
						this.fetchData()
					}
				})
			},
			editcar(car) {
				uni.navigateTo({
					url: '/pages/car/publish',
					success: function(res) {
						res.eventChannel.emit('car_edit', car)
					}
				})
			},
			changetab(e) {
				const { index } = e
				this.queryForm.isend = index
				this.list = []
				this.fetchData()
			},
			fetchData() {
				queryUserCarInfo(this.queryForm).then(res => {
					const { data } = res
					const { total, rows, count } = data
					rows.map(arr => {
						var title = ''
						if (arr.regtime) {
							title += arr.regtime + '上牌|'
						}
						if (arr.mileage) {
							title += arr.mileage + '万公里|'
						}
						if(arr.platelocation){
							var _add = arr.platelocation.split(" ")
							title += _add[1]
							arr.desc = title
						}
						 
						arr.imglist = []
						var imglist = arr.imgsrc ? arr.imgsrc.split(',') : []
						imglist.forEach(imgarr => {
							arr.imglist.push(baseconfig.api_url + imgarr)
						})
					})
					this.total = total

					Object.assign(this.list, rows)
					if ((this.queryForm.start + this.queryForm.length) >= total) {
						this.status = 'nomore'
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.carlist .fycaritem{
		background: #fff;
		margin: 0 20upx;
		border-radius: 10upx;
		
	}
	.carlist .fycaritem .car-list-item{
		margin-bottom: 0;
	}
	.car-list-box {
		background-color: #fff;
		margin-bottom: 5px;

		&_buttons {
			display: flex;
			flex-direction: row-reverse;
			align-items: center;
			padding: 0 20upx 20upx 20upx;

			.button-top {
				border: #ff3600 solid 1upx;
				border-radius: 30upx;
				text-align: center;
				padding: 4upx 20upx;
				margin-left: 20upx;
				color:#ff3600;
				font-size: 24upx;
				image{
					width: 36upx;
					height: 36upx;
					vertical-align: middle;
					margin: -6upx 6upx 0 0;
				}
			}

			.button-other {
				border: #999 solid 1upx;
				border-radius: 130upx;
				text-align: center;
				padding: 4upx 20upx;
				margin-left: 20upx;
				color:#888;
				font-size: 24upx;
				image{
					width: 36upx;
					height: 36upx;
					vertical-align: middle;
					margin: -6upx 6upx 0 0;
				}
			}

		}

	}
	.uv-action-sheet__item-wrap__item__name{
		font-size: 13px !important;
	}
</style>